<template>
  <div>
    
    <div class="chain-link-bar-wrapper">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>商协会列表</el-breadcrumb-item>
        <el-breadcrumb-item to="/store">商协会列表</el-breadcrumb-item>
      </el-breadcrumb>  
    </div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商协会列表</span>

      </div>

      <div class="app-diliver-10"></div>
      <div class="clearfix app-tabs-wrapper color-black-third">
        <span 
          :class="{'color-theme': page.checkStatus == ''}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabCheckStatus('')"
          >全部</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'NOT'}"
          class="app-tab app-margin-r-40"
          @click="selectTabCheckStatus('NOT')"
		  style="font-size: 45px;"
          >待审核</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'PASS'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabCheckStatus('PASS')"
          >审核成功</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'FAIL'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabCheckStatus('FAIL')"
          >审核失败</span>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <el-input
                  clearable
                  placeholder="手机号"
                  v-model="page.phone"
                  style="width: 200px;"
          ></el-input>
        </div>
        <div class="app-display-inline">
          <el-input
            clearable
            placeholder="商协会名称"
            v-model="page.name"
            style="width: 200px;"
              ></el-input>
        </div>
        <div class="app-display-inline app-margin-h-20">
          <el-date-picker
            v-model="page.startDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="开始日期">
          </el-date-picker>
        </div>
        <div class="app-display-inline app-margin-h-20">
          <el-date-picker
            v-model="page.endDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary" 
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>
      
      <el-table :data="memberList" @sort-change="sortMethod" stripe border style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        
        <el-table-column
          label="logo">
          <template slot-scope="scope">
            <img :src="scope.row.logo" class="app-list-head-img">
          </template>
        </el-table-column>

        <el-table-column
          label="商协会名称">
          <template slot-scope="scope">
           {{scope.row.name}}
          </template>
        </el-table-column>
        
        <el-table-column
          label="简介">
          <template slot-scope="scope">
            <span v-if="scope.row.intro != undefined && scope.row.intro.length > 10">
             {{ scope.row.intro.substring(0,10) }}...
             </span>
             <span v-else>
             {{ scope.row.intro }}
             </span>
          </template>
        </el-table-column>
        <el-table-column
          label="商协会类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 'UNION'">协会</span>
            <span v-if="scope.row.type == 'COMMERCE'">商会</span>
          </template>
        </el-table-column>
        <el-table-column label="导航地址">
          <template slot-scope="scope">
            {{scope.row.address_detail}}
          </template>
        </el-table-column>
        <el-table-column label="注册时间" sortable="custom" width="110" prop="create_date_time"/>
        <el-table-column label="保存信息时间" sortable="custom" width="130" prop="modified_time"/>
        <el-table-column label="开通时间" sortable="custom" width="110" prop="open_time">
          <template slot-scope="scope">
            <span v-if="scope.row.level_3 == 1">{{scope.row.level_3_start_date_time}}</span>
            <span v-if="scope.row.level_4 == 1">{{scope.row.level_4_start_date_time}}</span>
          </template>
        </el-table-column>
        <el-table-column width="190" label="会员有效期">
          <template slot-scope="scope">
            <span class="text-bold" v-if="scope.row.level_3 == 1">{{scope.row.level_3_start_date_time}}&nbsp;~&nbsp;{{scope.row.level_3_end_date_time}}</span>
            <span class="text-bold" v-if="scope.row.level_4 == 1">{{scope.row.level_4_start_date_time}}&nbsp;~&nbsp;{{scope.row.level_4_end_date_time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="110" sortable="custom" prop="check_status">
          <template slot-scope="scope">
            <span class="text-bold" v-if="scope.row.check_status == null">未审核</span>
            <span class="text-bold color-warning" v-else-if="scope.row.check_status == 'NOT'">待审核</span>
            <span class="text-bold color-success" v-else-if="scope.row.check_status == 'PASS'">通过</span>
            <span class="text-bold color-danger" v-else>不通过</span>
          </template>
        </el-table-column> 

        <el-table-column
          label="操作">
          <template slot-scope="scope">
              <el-button
                v-if="scope.row.check_status == 'PASS'"
                type="warning" 
                plain 
                size="mini" 
                @click="checkStatusHandle(scope.row.id, 0)">不通过</el-button>
              <el-button
                v-if="scope.row.check_status != 'PASS'"
                type="success" 
                plain 
                size="mini" 
                @click="checkStatusHandle(scope.row.id, 1)">审核通过</el-button>
            <a class="" :href="'#/member/commerceDetail/' + scope.row.id" target="_blank">
              <el-button
                      plain
                      size="mini"
              >详情</el-button>
            </a>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>  
    <CommerceCheckStatusEditDialog :is-show="checkStatusEditVisible" :member-obj="editMember" :check-yes="checkYes"></CommerceCheckStatusEditDialog>
  </div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'
  import CommerceCheckStatusEditDialog from './CommerceCheckStatusEditDialog'

  import Api from '../../api/Api'
  import MemberApi from '../../api/MemberApi'

  import JsonKit from '../../kit/JsonKit'

  import { mapGetters } from 'vuex'
  

  export default {
    components: {
      NcButton, SubmitButton, CommerceCheckStatusEditDialog
    },
    data(){
      return {
        memberList: [],

        page: {
          columnProp: '',
          columnOrder: '',
          realName: '',
          phone: '',
          address: '',
          level: -1,
          startDate: '',
          endDate: '',
          checkStatus: '',
          pageNum: 1,
          pageSize: 10,
		  inviteCode:''
        },

        checkStatusEditVisible: false,
        checkYes: 0,
        editMember: {},

        searchUrl: MemberApi.URL_COMMERCE_LIST,
      }
    },
    computed: {
      ...mapGetters(['hasPerm'])
    },
    created(){
      this.getPage();

      this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
    },
    beforeDestroy: function(){
      this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
    methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
      searchCB(json){
        this.memberList = json.list;
        this.setPage(json);
      },
      getPage(){
        MemberApi.commerceList(this.page, json=>{
          console.log(json)
          this.memberList = json.list;
          this.setPage(json);
        });  
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
      selectTabStatus(level){
        this.page.level = level;
        this.page.pageNum = 1;
        this.getPage();
      },
      selectTabCheckStatus(checkStatus){
        this.page.checkStatus = checkStatus;
        this.page.pageNum = 1;
        this.getPage();
      },
      checkStatusHandle(id, checkYes){
        this.editMember = JsonKit.getOf(this.memberList, 'id', id, null);
        this.checkYes = checkYes;
        this.checkStatusEditVisible = true;
      },
      hideEditDialog(isSuccess){
        this.checkStatusEditVisible = false;
        this.editMember = {};

        if (isSuccess) {
          this.getPage();
        }
      },
    }
  }
</script>
